<template>
  <v-content >
    <div class="mw-column-style" style="background-color: #ffffff;" v-vuet-scroll="{ path: 'addresslist', name: 'content' }">
      <div style="height:.5rem;line-height:.5rem;text-align:center;">全部分类</div>
      <div class="mw-row-style" style="border-top:1px solid #ddd;">
        <div style="width: 1rem;min-height: 90vh;border-right:1px solid #ddd;padding:.17rem .04rem 0 .14rem;">
          <h4 style="font-size:.12rem;color:#b3b3b3;">推荐</h4>
          <ul class="classify_menu">
            <li class="item" v-for="(item,index) in categories" :key="index"
            :class="{active:curIndex == index }"
            @click="changeClassify(index)">{{item.name}}</li>
          </ul>
        </div>
        <div class="classify_box">
          <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
            <div class="item" v-for="(item,index) in categorieChildren" :key="index">
              <div style="width:.6rem;height:.6rem;border-radius:.6rem;overflow:hidden;background-color:yellow;">
                <img :src="item.icon_url" width="100%" alt="">
              </div>
              <p class="m-t-10" style="text-align:center;">{{item.name}}</p>
            </div>
            <div class="other"></div>
            <div class="other"></div>
          </div>
        </div>
      </div>
    </div>
  </v-content>
</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      // mapModules({data: 'addresslist'}),
      // mapRules({store: [{ path: 'addresslist' }],need: [{ path: 'addresslist' }]}),
    ],
    components: {

    },
    data() {
      return {
        curIndex:0,
        isActive:false,
        categories:[],
        categorieChildren:[],
      }
    },
    methods: {
      changeClassify(i){
        this.curIndex = i;
        this.categorieChildren = this.categories[i].children;
      },
      getCategory(){
        var that = this;
        httputil.request("category/tree", {valid: 1}, function (successresult) {
            that.categories = successresult.categories;
            that.categorieChildren = that.categories[0].children;
          }, function (errorresult) {
            if (type == "down") {
              done();
            }
          }, "GET", false, "")
      },
    },

    created() {
      
    },

    mounted() {
      this.getCategory();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '../../assets/styles/base.less';
.btn_default {
  width: 0.5rem;
  text-align: center;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
}
.btn_info {
  /* flex: 1 0 25%; */
  outline: 0;
  color: #333;
  width: 0.66rem;
  text-align: center;
  height: 0.3rem;
  line-height: 0.3rem;
  margin: 0.15rem 0.01rem 0 0.01rem;
  background-color: #f2f2f2;
  border: 0;
  border-radius: 0.3rem;
}
.btn_info.active {
  background-color: #ffd012;
}
.other {
  width: 0.66rem;
  height: 0;
  visibility: hidden;
}
.classify_menu{
  list-style: none;
}
.classify_menu .item{
  border-left: 2px solid transparent;
  padding-left: .08rem;
  margin-top: .3rem;
}
.classify_menu .item.active{
  border-color: @mw-color;
}
.classify_box{
  width: 2.5rem;
  padding: .17rem .1rem;
}
.classify_box .item{
  margin: .05rem;
}
</style>
